
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>New Products</title>

    <link href="images/logo.png" rel="shortcut icon">

    <link href="css/normalize.css" rel="stylesheet" type="text/css">
    <link href="css/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css/reset.css" rel="stylesheet" type="text/css">
    <link href="css/font.css" rel="stylesheet" type="text/css">
    <link href="css/flexslider.css" rel="stylesheet" type="text/css">
    <!--CSS-->
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <!--JS-->
    <script src="plugins/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
<section class="itq-wrapper">
    <header class="itq-header">
        <figure>
            <a href="index.html"><img src="images/logo.png" alt=""></a>
        </figure>
        <section class="itq-cart">
            <figure>
                <a href="#"><img src="images/cart.png" alt=""></a>
                <figcaption>
                    <p>
                        <span class="cart">Shopping Cart:</span>now in your cart<span class="items"> 0 items</span>
                    </p>
                </figcaption>
            </figure>
        </section>
    </header><!--end .itq-header-->
    <nav class="menu-main">
    <ul class="main">
        <li class="main"><a href="index.html">Home</a></li>
        <li class="main"><a href="new-products.html">New Products</a></li>
        <li class="main"><a href="specials.html">Specials</a></li>
        <li class="main"><a href="all-products.html">All Products</a></li>
        <li class="main"><a href="faqs.html">FAQs</a></li>
        <li class="main"><a href="contacts.html">Contacts</a></li>
    </ul>
    </nav>
    <section class="itq-content">
        <section class="itq-content-left">
            <section class="itq-catalog">
                <h3>CATAGORIES</h3>
                <nav class="menu-item">
                    <ul class="item">
                        <li class="item"><i class="fa fa-angle-double-right"></i><a href="#">Birthday Flowers</a></li>
                        <li class="item"><i class="fa fa-angle-double-right"></i><a href="#">Congratulations</a></li>
                        <li class="item"><i class="fa fa-angle-double-right"></i><a href="#">Corporate</a></li>
                        <li class="item"><i class="fa fa-angle-double-right"></i><a href="#">Family Flowers</a></li>
                        <li class="item"><i class="fa fa-angle-double-right"></i><a href="#">Funeral Flowers</a></li>
                        <li class="item"><i class="fa fa-angle-double-right"></i><a href="#">Get Well Flowers</a></li>
                        <li class="item"><i class="fa fa-angle-double-right"></i><a href="#">Love Flowers</a></li>
                        <li class="item"><i class="fa fa-angle-double-right"></i><a href="#">Mixed Fresh Bouquets</a></li>
                        <li class="item"><i class="fa fa-angle-double-right"></i><a href="#">Monthly Flowers Gifts</a></li>
                        <li class="item"><i class="fa fa-angle-double-right"></i><a href="#">Most Popular</a></li>
                        <li class="item"><i class="fa fa-angle-double-right"></i><a href="#">New Baby Bouquets</a></li>
                        <li class="item"><i class="fa fa-angle-double-right"></i><a href="#">Sympathy Gifts</a></li>
                        <li class="item"><i class="fa fa-angle-double-right"></i><a href="#">Week Flowers</a></li>
                        <li class="item"><i class="fa fa-angle-double-right"></i><a href="#">Universally</a></li>
                    </ul>
                </nav>
            </section><!--end .itq-catalog-->
            <section class="itq-advertise">
                <figure><img src="uploads/lorem.jpg" alt=""></figure>
            </section><!--end .itq-advertise-->
        </section><!--end .itq-content-left-->
        <section class="itq-new-product">
            <header><h3>New Products</h3></header>
            <ul class="new">
                <li class="new">
                    <figure>
                        <a href="#"><img src="uploads/product-1.jpg" alt=""></a>
                        <figcaption>
                            <h4>Product #001</h4>
                            <p>
                                Price:<span class="new-price">$35.99</span>
                            </p>
                            <a href="#" class="buy">buy now</a>
                            <article>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor porta eros, vel dictum felis blandit eu. Sed ac orci nulla, eu condimentum purus. Quisque dolor quam, sodales sit amet tincidunt eu, vulputate sed justo.
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor porta eros, vel dictum felis blandit eu. Sed ac orci nulla, eu condimentum purus. Quisque dolor quam, sodales sit amet tincidunt eu, vulputate sed justo.
                                </p>
                            </article>
                            <a href="#" class="view">View more</a>
                        </figcaption>
                    </figure>
                </li>
                <li class="new">
                    <figure>
                        <a href="#"><img src="uploads/product-1.jpg" alt=""></a>
                        <figcaption>
                            <h4>Product #001</h4>
                            <p>
                                Price:<span class="new-price">$35.99</span>
                            </p>
                            <a href="#" class="buy">buy now</a>
                            <article>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor porta eros, vel dictum felis blandit eu. Sed ac orci nulla, eu condimentum purus. Quisque dolor quam, sodales sit amet tincidunt eu, vulputate sed justo.
                                </p>
                            </article>
                            <a href="#" class="view">View more</a>
                        </figcaption>
                    </figure>
                </li>
                <li class="new">
                    <figure>
                        <a href="#"><img src="uploads/product-1.jpg" alt=""></a>
                        <figcaption>
                            <h4>Product #001</h4>
                            <p>
                                Price:<span class="new-price">$35.99</span>
                            </p>
                            <a href="#" class="buy">buy now</a>
                            <article>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor porta eros, vel dictum felis blandit eu. Sed ac orci nulla, eu condimentum purus. Quisque dolor quam, sodales sit amet tincidunt eu, vulputate sed justo.
                                </p>
                            </article>
                            <a href="#" class="view">View more</a>
                        </figcaption>
                    </figure>
                </li>
                <li class="new">
                    <figure>
                        <a href="#"><img src="uploads/product-1.jpg" alt=""></a>
                        <figcaption>
                            <h4>Product #001</h4>
                            <p>
                                Price:<span class="new-price">$35.99</span>
                            </p>
                            <a href="#" class="buy">buy now</a>
                            <article>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor porta eros, vel dictum felis blandit eu. Sed ac orci nulla, eu condimentum purus. Quisque dolor quam, sodales sit amet tincidunt eu, vulputate sed justo.
                                </p>
                            </article>
                            <a href="#" class="view">View more</a>
                        </figcaption>
                    </figure>
                </li>
                <li class="new">
                    <figure>
                        <a href="#"><img src="uploads/product-1.jpg" alt=""></a>
                        <figcaption>
                            <h4>Product #001</h4>
                            <p>
                                Price:<span class="new-price">$35.99</span>
                            </p>
                            <a href="#" class="buy">buy now</a>
                            <article>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor porta eros, vel dictum felis blandit eu. Sed ac orci nulla, eu condimentum purus. Quisque dolor quam, sodales sit amet tincidunt eu, vulputate sed justo.
                                </p>
                            </article>
                            <a href="#" class="view">View more</a>
                        </figcaption>
                    </figure>
                </li>
            </ul>
        </section><!--end .itq-new-product-->
    </section><!--end .itq-content-->
    <footer class="itq-footer">
        <nav class="menu-ft">
            <ul class="item-ft">
                <li class="item-ft"><a href="index.html">Home</a></li>
                <li class="item-ft"><a href="new-products.html">New Products</a></li>
                <li class="item-ft"><a href="specials.html">Specials</a></li>
                <li class="item-ft"><a href="all-products.html">All Products</a></li>
                <li class="item-ft"><a href="faqs.html">FAQs</a></li>
                <li class="item-ft"><a href="contacts.html">Contacts</a></li>
            </ul>
        </nav>
    </footer><!--end .itq-footer-->
    <section class="clear"></section>
</section><!--end .itq-wrapper-->

<!--JS Cắt ngắn đoạn văn-->

<script src="plugins/jquery.ellipsis.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $('.itq-wrapper .itq-content .itq-new-product ul.new li.new figure figcaption article p').ellipsis({
        lines: 3,             // force ellipsis after a certain number of lines. Default is 'auto'
        ellipClass: 'ellip',  // class used for ellipsis wrapper and to namespace ellip line
        responsive: true
    });
</script>
</body>
</html>